<template>
    <div class="righttwowrap">
        <div class="title">业务系统告警数据</div>
        <!-- <div  ref="bars" class="bars"></div> -->
        <swiper :options="swiperOptions">
                    <swiper-slide v-for="(righttwodata,index) in righttwodatas" :key="index">
                        <RightTwoBars :per="righttwodata.datasets"/>
                    </swiper-slide>
                    <div class="swiper-pagination paginationlocation" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import {getRightTwo} from "../assets/api/twoapi"
import RightTwoBars from './RightTwoBars.vue'
export default {
    components: {
    RightTwoBars
  },
    data() {
        return {
            righttwodatas:[],
            swiperOptions: {
                // loop: true,
                // loopAdditionalSlides: 0, 
                // loopedSlides:0,
                // observer:true,
                // observeParents:true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.paginationlocation',
                    clickable:true,
                    renderBullet:  (index, className)=> {
                        let x=this.righttwodatas&&this.righttwodatas[index]&&this.righttwodatas[index].name
                        return '<span class="howbullets ' + className + '">' + x + '</span>';
                    }   
                },
            },
            timer:null,
        };
    },
    created(){
        this.fetchData()
        this.timer = setInterval(() => {
        this.fetchData()
        }, this.howtimeout)
    },
    destroyed() {
        clearInterval(this.timer)
    },
    methods:{
        fetchData() {
            getRightTwo().then((res)=>{
                this.righttwodatas=res.data.result
            });
        },
    }
}
</script>

<style>

.righttwowrap{
    width: 871px;
    height: 542px;
    text-align: center;
    overflow:hidden; 
    position: relative;
    margin-left: 7px;
}
.title {
    color: #a3d7ff;
    font-size: 26px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 auto;
}
.bars {
    width: 871px;
	height: 331px;
}
.paginationlocation {
    bottom: 320px !important;
}
.howbullets{
    border-radius: 0 !important;
    width: 100px !important;
    height: 28px !important;
    box-sizing: border-box;
    font-size: 14px !important;
    font-family: MicrosoftYaHei;
    opacity: 1 !important;
    margin: 0 !important;
    padding-top: 3px !important;
}
.swiper-pagination-bullet {
	background: #0C4C86 !important;
	border: solid 1px #065fc9 !important;
    color:#a3d7ff !important;
} 
.swiper-pagination-bullet-active {
    background: #0C4D88 !important;
    border: solid 1px #47e7ff !important;
    box-shadow: inset 0px 0px 22px #47c0ff;
	color: #ffffff !important;
    /* color:#fff;
    background: #007aff; */
}
</style>